<template>
  <template v-for="e in (msglist as any)">
    <div v-show="e.fid != storage.get('userinfo')._id" class="ritem">
      <div class="icontent">
        <img class="tava" src="@/assets/avator.jpg" alt="" srcset="" />
        <div class="content">
          <div class="name" style="color: #000;font-weight: bolder;">
            {{    name(e.fid) }}
          </div>
          <div class="name">
            <div v-if="e.type == 'text'" class="text">
              {{ e.content }}
            </div>
            <div v-else-if="e.type == 'image'" class="image">
              <img :src="e.content" alt="" />
              <div class="btn">
                <n-space>
                  <n-button size="tiny" color="#085ffa" @click="handlePreview(e, 1)" secondary strong>预览</n-button>
                  <n-button :loading="btnLoading" size="tiny" color="#085ffa"
                    @click="handleDownload(e.content, e.remark)" secondary strong>下载</n-button>
                </n-space>
              </div>
            </div>
            <div v-else-if="e.type == 'video'" class="video">
              <video :src="e.content" muted autoplay="false" loop="false"></video>
              <div class="btn">
                <n-space>
                  <n-button size="tiny" color="#085ffa" @click="handlePreview(e, 1)" secondary strong>预览</n-button>
                  <n-button size="tiny" :loading="btnLoading" color="#085ffa"
                    @click="handleDownload(e.content, e.remark)" secondary strong>下载</n-button>
                </n-space>

              </div>
            </div>
            <div v-if="e.type == 'word'" class="word">
              <div class="iconinfo">
                <img :src="word" alt="" />
                <div class="iconcontent">
                  {{ e.remark }}
                </div>
              </div>


              <div class="btn">
                <n-space>
                  <n-button size="tiny" color="#085ffa" @click="handlePreview(e, 1)" secondary strong>预览</n-button>
                  <n-button size="tiny" :loading="btnLoading" color="#085ffa"
                    @click="handleDownload(e.content, e.remark)" secondary strong>下载</n-button>
                </n-space>

              </div>
            </div>
            <div v-if="e.type == 'ppt'" class="ppt">
              <div class="iconinfo"> <img :src="ppt" />
                <div class="iconcontent">
                  {{ e.remark }}
                </div>
              </div>
              <div class="btn">
                <n-space>
                  <n-button size="tiny" color="#085ffa" @click="handlePreview(e, 1)" secondary strong>预览</n-button>
                  <n-button size="tiny" :loading="btnLoading" color="#085ffa"
                    @click="handleDownload(e.content, e.remark)" secondary strong>下载</n-button>
                </n-space>

              </div>
            </div>
            <div v-if="e.type == 'textFile'" class="textFile">
              <div class="iconinfo"> <img :src="text" alt="" />
                <div class="iconcontent">
                  {{ e.remark }}
                </div>
              </div>

              <div class="btn">
                <n-space>
                  <n-button size="tiny" color="#085ffa" @click="handlePreview(e, 1)" secondary strong>预览</n-button>
                  <n-button size="tiny" :loading="btnLoading" color="#085ffa"
                    @click="handleDownload(e.content, e.remark)" secondary strong>下载</n-button>
                </n-space>

              </div>

            </div>
            <div v-if="e.type == 'pdf'" class="pdf">
              <div class="iconinfo">
                <img :src="pdf" alt="" />
                <div class="iconcontent">
                  {{ e.remark }}
                </div>
              </div>


              <div class="btn">
                <n-space>
                  <n-button size="tiny" color="#085ffa" @click="handlePreview(e, 1)" secondary strong>预览</n-button>
                  <n-button size="tiny" :loading="btnLoading" color="#085ffa"
                    @click="handleDownload(e.content, e.remark)" secondary strong>下载</n-button>
                </n-space>

              </div>

            </div>
            <div v-if="e.type == 'excel'" class="excel">
              <div class="iconinfo">
                <img :src="excel" alt="" />
                <div class="iconcontent">
                  {{ e.remark }}
                </div>
              </div>
              <div class="btn">
                <n-space>
                  <n-button size="tiny" color="#085ffa" @click="handlePreview(e, 1)" secondary strong>预览</n-button>
                  <n-button size="tiny" :load="btnLoading" color="#085ffa" @click="handleDownload(e.content, e.remark)"
                    secondary strong>下载</n-button>
                </n-space>

              </div>
            </div>
            <div v-if="e.type == 'unknown'" class="unknown">
              <div class="iconinfo">
                <img :src="unknown" alt="" />
                <div class="iconcontent">
                  {{ e.remark }}
                </div>
              </div>
              <div class="btn">
                <n-space>
                  <n-button size="tiny" :loading="btnLoading" color="#085ffa"
                    @click="handleDownload(e.content, e.remark)" secondary strong>下载</n-button>
                </n-space>

              </div>
            </div>
          </div>
          <div class="time">
            发送于{{ dayjs(e.time).format('YYYY-MM-DD HH:mm:ss') }}
          </div>
        </div>
      </div>
    </div>
    <div v-show="e.fid == storage.get('userinfo')._id" class="litem">
      <div class="icontent">
        <img class="tava" src="@/assets/avator.jpg" alt="" srcset="" />
        <div class="content">
          <div style="color: #085ffa;font-weight: bolder;" class="name">
            我
          </div>
          <div class="name">
            <div v-if="e.type == 'text'" class="text">
              {{ e.content }}
            </div>
            <div v-else-if="e.type == 'image'" class="image">
              <img :src="e.content" alt="" />
              <div class="btn">
                <n-space>
                  <n-button size="tiny" color="#085ffa" @click="handlePreview(e, 1)" secondary strong>预览</n-button>
                  <n-button :loading="btnLoading" size="tiny" color="#085ffa"
                    @click="handleDownload(e.content, e.remark)" secondary strong>下载</n-button>
                </n-space>
              </div>
            </div>
            <div v-else-if="e.type == 'video'" class="video">
              <video :src="e.content" muted autoplay="false" loop="false"></video>
              <div class="btn">
                <n-space>
                  <n-button size="tiny" color="#085ffa" @click="handlePreview(e, 1)" secondary strong>预览</n-button>
                  <n-button size="tiny" :loading="btnLoading" color="#085ffa"
                    @click="handleDownload(e.content, e.remark)" secondary strong>下载</n-button>
                </n-space>

              </div>
            </div>
            <div v-if="e.type == 'word'" class="word">
              <div class="iconinfo">
                <img :src="word" alt="" />
                <div class="iconcontent">
                  {{ e.remark }}
                </div>
              </div>


              <div class="btn">
                <n-space>
                  <n-button size="tiny" color="#085ffa" @click="handlePreview(e, 1)" secondary strong>预览</n-button>
                  <n-button size="tiny" :loading="btnLoading" color="#085ffa"
                    @click="handleDownload(e.content, e.remark)" secondary strong>下载</n-button>
                </n-space>

              </div>
            </div>
            <div v-if="e.type == 'ppt'" class="ppt">
              <div class="iconinfo"> <img :src="ppt" />
                <div class="iconcontent">
                  {{ e.remark }}
                </div>
              </div>
              <div class="btn">
                <n-space>
                  <n-button size="tiny" color="#085ffa" @click="handlePreview(e, 1)" secondary strong>预览</n-button>
                  <n-button size="tiny" :loading="btnLoading" color="#085ffa"
                    @click="handleDownload(e.content, e.remark)" secondary strong>下载</n-button>
                </n-space>

              </div>
            </div>
            <div v-if="e.type == 'textFile'" class="textFile">
              <div class="iconinfo"> <img :src="text" alt="" />
                <div class="iconcontent">
                  {{ e.remark }}
                </div>
              </div>

              <div class="btn">
                <n-space>
                  <n-button size="tiny" color="#085ffa" @click="handlePreview(e, 1)" secondary strong>预览</n-button>
                  <n-button size="tiny" :loading="btnLoading" color="#085ffa"
                    @click="handleDownload(e.content, e.remark)" secondary strong>下载</n-button>
                </n-space>

              </div>

            </div>
            <div v-if="e.type == 'pdf'" class="pdf">
              <div class="iconinfo">
                <img :src="pdf" alt="" />
                <div class="iconcontent">
                  {{ e.remark }}
                </div>
              </div>


              <div class="btn">
                <n-space>
                  <n-button size="tiny" color="#085ffa" @click="handlePreview(e, 1)" secondary strong>预览</n-button>
                  <n-button size="tiny" :loading="btnLoading" color="#085ffa"
                    @click="handleDownload(e.content, e.remark)" secondary strong>下载</n-button>
                </n-space>

              </div>

            </div>
            <div v-if="e.type == 'excel'" class="excel">
              <div class="iconinfo">
                <img :src="excel" alt="" />
                <div class="iconcontent">
                  {{ e.remark }}
                </div>
              </div>
              <div class="btn">
                <n-space>
                  <n-button size="tiny" color="#085ffa" @click="handlePreview(e, 1)" secondary strong>预览</n-button>
                  <n-button size="tiny" :load="btnLoading" color="#085ffa" @click="handleDownload(e.content, e.remark)"
                    secondary strong>下载</n-button>
                </n-space>

              </div>
            </div>
            <div v-if="e.type == 'unknown'" class="unknown">
              <div class="iconinfo">
                <img :src="unknown" alt="" />
                <div class="iconcontent">
                  {{ e.remark }}
                </div>
              </div>
              <div class="btn">
                <n-space>
                  <n-button size="tiny" :loading="btnLoading" color="#085ffa"
                    @click="handleDownload(e.content, e.remark)" secondary strong>下载</n-button>
                </n-space>

              </div>
            </div>
          </div>
          <div class="time">
            发送于{{ dayjs(e.time).format('YYYY-MM-DD HH:mm:ss') }}
          </div>
        </div>
      </div>
    </div>
  </template>

</template>

<script setup lang="ts">
import storage from '@/utils/storage';
import dayjs from 'dayjs';
import { ref,computed } from 'vue';
import word from "@/assets/word.png";
import excel from "@/assets/excel.png";
import text from "@/assets/text.png";
import unknown from "@/assets/unknown.png";
import pdf from "@/assets/pdf.png";
import ppt from "@/assets/ppt.png";
const props=defineProps({
  msglist: {
    type: Array,
    default: () => [],
  },
  friendlistData: {
    type: Array,
    default: () => [], 
  }
});


const name=computed(()=>(fid:string)=>{
let friend= props.friendlistData.find((friend: any) => friend._id === fid) as any;
  return friend ? friend.userName : '未知用户';
});

// const getUserNameByFid = (fid: string) => {
//   const friend =props.friendlistData.find((friend: any) => friend._id === fid) as any;
//   return friend ? friend.userName : '未知用户';
// };
const emits = defineEmits(['handlePreview', 'handleDownload']);
const handlePreview = (e: any, type: number) => {
  emits('handlePreview', e, type);
}
const btnLoading = ref<boolean>(false);
const handleDownload = (url: string, name: string) => {
  emits('handleDownload', url, name);

}
defineExpose({
  btnLoading
});

</script>

<style lang="scss" scoped>
.litem {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-shrink: 0;
  height: auto;
  justify-content: flex-start;

  .icontent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 10px;
    transform: rotate(180deg);

    .tava {
      width: 40px;
      height: 40px;
      margin: 0 10px
    }

    .content {
      display: flex;
      flex-direction: column;
      min-height: 70px;
      width: 100%;

      .name {
        width: 80%;
        display: flex
      }

      .text {
        overflow: hidden;
        padding: 6px 8px;
        border-radius: 4px;
        display: inline-block;
        color: #fff;
        box-sizing: border-box;
        background-color: #085ffa;
      }

      .image {
        padding: 8px 10px;
        box-sizing: border-box;
        background: #ffffff;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .btn {
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 10px;
          justify-content: flex-start
        }

        img {
          max-width: 200px;
          text-align: center
        }
      }

      .video {
        padding: 8px 10px;
        box-sizing: border-box;
        background: #ffffff;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        align-items: center;

        video {
          max-width: 200px
        }

        .btn {
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 10px;
          justify-content: flex-start
        }
      }

      .word {
        padding: 8px 10px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 6px;
        display: flex;
        color: #000;
        flex-direction: column;
        align-items: center;

        .iconinfo {
          display: flex;
          align-items: center;
          justify-content: space-around;
          flex-direction: row-reverse;

          img {
            height: 40px;
            margin-right: 10px
          }

          .iconcontent {
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            width: 160px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            max-height: 60px;
          }
        }

        .btn {
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 10px;
          justify-content: flex-start
        }
      }

      .ppt {
        padding: 8px 10px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 6px;
        display: flex;
        color: #000;
        flex-direction: column;
        align-items: center;

        .iconinfo {
          display: flex;
          align-items: center;
          justify-content: space-around;
          flex-direction: row-reverse;

          img {
            height: 40px;
            margin-right: 10px
          }

          .iconcontent {
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            width: 160px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            max-height: 60px;
          }
        }

        .btn {
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 10px;
          justify-content: flex-start
        }
      }

      .textFile {
        padding: 8px 10px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 6px;
        display: flex;
        color: #000;
        flex-direction: column;
        align-items: center;

        .iconinfo {
          display: flex;
          align-items: center;
          justify-content: space-around;
          flex-direction: row-reverse;

          img {
            height: 40px;
            margin-right: 10px
          }

          .iconcontent {
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            width: 160px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            max-height: 60px;
          }
        }

        .btn {
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 10px;
          justify-content: flex-start
        }
      }

      .pdf {
        padding: 8px 10px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 6px;
        display: flex;
        color: #000;
        flex-direction: column;
        align-items: center;

        .iconinfo {
          display: flex;
          align-items: center;
          justify-content: space-around;
          flex-direction: row-reverse;

          img {
            height: 40px;
            margin-right: 10px
          }

          .iconcontent {
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            width: 160px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            max-height: 60px;
          }
        }

        .btn {
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 10px;
          justify-content: flex-start
        }
      }

      .excel {
        padding: 8px 10px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 6px;
        display: flex;
        color: #000;
        flex-direction: column;
        align-items: center;

        .iconinfo {
          display: flex;
          align-items: center;
          justify-content: space-around;
          flex-direction: row-reverse;

          img {
            height: 40px;
            margin-right: 10px
          }

          .iconcontent {
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            width: 160px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            max-height: 60px;
          }
        }

        .btn {
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 10px;
          justify-content: flex-start
        }
      }
    }

    .time {
      font-size: 12px;
      color: #d3d3d3;
      margin-top: 3px;
    }
  }
}


.ritem {
  width: 100%;
  display: flex;
  margin-top: 10px;
  flex-shrink: 0;
  justify-content: flex-start;

  .icontent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    width: 100%;
    transform: rotate(180deg);
    padding-top: 10px;

    .tava {
      width: 40px;
      height: 40px;
      margin: 0 10px
    }

    .content {
      display: flex;
      flex-direction: column;
      min-height: 70px;
      width: 100%;
      align-items: flex-end;


      .name {
        width: 80%;
        display: flex;
        justify-content: flex-end;
      }

      .text {
        overflow: hidden;
        padding: 6px 8px;
        border-radius: 4px;
        display: inline-block;
        color: black;
        box-sizing: border-box;

        background-color: #ffffff;
      }

      .image {
        padding: 8px 10px;
        box-sizing: border-box;
        background: #ffffff;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .btn {
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 10px;
          justify-content: flex-start
        }

        img {
          max-width: 200px;
          text-align: center
        }
      }

      .video {
        padding: 8px 10px;
        box-sizing: border-box;
        background: #ffffff;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        align-items: center;

        video {
          max-width: 200px
        }

        .btn {
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 10px;
          justify-content: flex-start
        }
      }

      .word {
        padding: 8px 10px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 6px;
        display: flex;
        color: #000;
        flex-direction: column;
        align-items: center;

        .iconinfo {
          display: flex;
          align-items: center;
          justify-content: space-around;
          flex-direction: row-reverse;

          img {
            height: 40px;
            margin-right: 10px
          }

          .iconcontent {
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            width: 160px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            max-height: 60px;
          }
        }

        .btn {
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 10px;
          justify-content: flex-start
        }
      }

      .ppt {
        padding: 8px 10px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 6px;
        display: flex;
        color: #000;
        flex-direction: column;
        align-items: center;

        .iconinfo {
          display: flex;
          align-items: center;
          justify-content: space-around;
          flex-direction: row-reverse;

          img {
            height: 40px;
            margin-right: 10px
          }

          .iconcontent {
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            width: 160px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            max-height: 60px;
          }
        }

        .btn {
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 10px;
          justify-content: flex-start
        }
      }

      .textFile {
        padding: 8px 10px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 6px;
        display: flex;
        color: #000;
        flex-direction: column;
        align-items: center;

        .iconinfo {
          display: flex;
          align-items: center;
          justify-content: space-around;
          flex-direction: row-reverse;

          img {
            height: 40px;
            margin-right: 10px
          }

          .iconcontent {
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            width: 160px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            max-height: 60px;
          }
        }

        .btn {
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 10px;
          justify-content: flex-start
        }
      }

      .pdf {
        padding: 8px 10px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 6px;
        display: flex;
        color: #000;
        flex-direction: column;
        align-items: center;

        .iconinfo {
          display: flex;
          align-items: center;
          justify-content: space-around;
          flex-direction: row-reverse;

          img {
            height: 40px;
            margin-right: 10px
          }

          .iconcontent {
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            width: 160px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            max-height: 60px;
          }
        }

        .btn {
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 10px;
          justify-content: flex-start
        }
      }

      .excel {
        padding: 8px 10px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 6px;
        display: flex;
        color: #000;
        flex-direction: column;
        align-items: center;

        .iconinfo {
          display: flex;
          align-items: center;
          justify-content: space-around;
          flex-direction: row-reverse;

          img {
            height: 40px;
            margin-right: 10px
          }

          .iconcontent {
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            width: 160px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            max-height: 60px;
          }
        }

        .btn {
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 10px;
          justify-content: flex-start
        }
      }

      .time {
        font-size: 12px;
        color: #d3d3d3;
        margin-top: 3px;
      }
    }
  }
}
</style>